<template>
  <div>
    <el-table :data="shopList" style="width: 100%">
      <el-table-column prop="nickname" label="店铺" width="">
        <template slot-scope="scope">
          <el-avatar :size="50" :src="scope.row.permit_img" />
        </template>
      </el-table-column>
      <el-table-column prop="username" label="绑定手机号" width="" />

      <el-table-column prop="details" label="地址" width="" />
      <el-table-column prop="shop_count" label="现有商品(种)" width="" />
      <el-table-column prop="sales" label="总销售额" width="" />
      <el-table-column prop="sigin_in_count" label="打卡记录" width="">
        <template slot-scope="scope">
          <span @click="punchRecordClick(scope)">{{ scope.row.sigin_in_count }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="" />
      <el-table-column prop="created_at" label="注册时间" width="150" />
    </el-table>
    <punch-record :id="id" :dialog-visible="dialogVisible" @closePunchDialog="closePunchDialog" />
  </div>
</template>
<script>
import PunchRecord from './punchRecord'
export default {
  components: {
    PunchRecord
  },
  props: {
    shopList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      id: ''
    }
  },
  methods: {
    punchRecordClick(scope) {
      this.dialogVisible = true
      this.id = scope.row.id
    },
    closePunchDialog() {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.el-table /deep/ .el-table__row td{
  &:nth-child(6) {
    color: #409EFF;
    cursor: pointer;
    span{
      display: inline-block;
      width: 50px;
    }
  }
}
</style>
